<template>
    <compWrapper v-if="imgData.length>0" :title="$t('global.photo.info', { defaultValue: '照片信息' })" theme="info" v-bind="$attrs">
        <div style="position: relative;">
            <Spin fix v-if="loading"></Spin>
            <Table border  class="margin-15" :data="imgData" :columns="imgColumns" size="small"></Table>
        </div>
        <Modal v-model="modalProps.show" v-bind="modalProps">
            <img style="width: 800px; height: auto;" :src="modalProps.url" />
        </Modal>
    </compWrapper>
</template>

<script>
import { HttpGetOrderPicture } from "@mods/service/base";
export default {
    props: {
        orderType: {
            require: true,
        },
        orderData: {
        }
    },
    watch: {
        orderType: {
            handler (val) {
                if (!val) return;
                this.getData(val);
            }
        }
    },
    data () {
        return {
            loading: false,
            imgData: [],
            modalProps: {
                show: false,
                title: this.$ct('global.photo.info', { defaultValue: '照片信息' }),
                footerHide: true,
                width: 836,
                zIndex: 9999,
                url: ''
            },            
        }
    },
    methods: {
        async getData (value) {
            let { orderType, key } = { ...this.orderTypeMap[value]}
            let param = {
                orderType,
                orderNo: this.orderData[key]
            }
            await HttpGetOrderPicture(param).then(res => {
                console.log('photoData', res)
                // this.imgData = res.data;
                if (!res.data || !res.data.length) return;
                let dataList = res.data;
                let imgData = [];
                let indexs = [];
                // 相同的行合并图像
                for (let i = 0; i < dataList.length; i ++) {
                    let flag = false;
                    indexs.forEach(index => {
                        if (index === i) return flag = true;
                    })
                    if (flag) continue;
                    let { sku, orderNo } = {
                        ...dataList[i]
                    };
                    let item = {
                        ...dataList[i],
                        pictureUrl: [dataList[i].pictureUrl],
                        remark: [dataList[i].remark]
                    };
                    for (let j = 0; j < dataList.length; j ++) {
                        if (i == j) continue;
                        let cItem = {
                            ...dataList[j]
                        };
                        // 相同的行
                        if (sku === cItem.sku && orderNo === cItem.orderNo) {
                            // console.log('相同', i, j);
                            item.pictureUrl.push(cItem.pictureUrl);
                            // item.remark.push(cItem.remark);
                            indexs.push(j);
                        }
                    };
                    imgData.push(item);
                };
                this.imgData = imgData;
            }, err => {
                this.$Message.error(err)
            }).finally(() => {
                this.loading = false;
            });
        },
        handleImgModal (url) {
            this.modalProps.show = true;
            this.modalProps.url = url;
        },
    },
    computed: {
        orderTypeMap () {
            return {
                // 调拨计划单 调拨计划单号
                1: {
                    orderType: 301,
                    key: 'transferOutboundPlanNo'
                },
                // 入库计划单 入库计划单号
                2: {
                    orderType: 420,
                    key: 'inboundPlanOrderNo'
                },
                // 入库单 来源单号
                3: {
                    orderType: 430,
                    key: 'sourceNo'
                },
                // 销售订单 配货单号
                4: {
                    orderType: 200,
                    key: 'deliverOrderNo'
                },
                // 销售退货计划/无来源入库(退货单) 来源单号
                5: {
                    orderType: 410,
                    key: 'saleReturnPlanNo'
                },
                // 销售退货单 来源单号
                6: {
                    orderType: 420,
                    key: 'sourceNo'
                },
                // 调拨出库计划 调拨出库计划单号
                7: {
                    orderType: 300,
                    key: 'transferOutboundNo'
                },
                // 调拨入库计划 调拨入库计划单号
                8: {
                    orderType: 320,
                    key: 'transferInboundOrderNo'
                },
                9: {
                    orderType: 431,
                    key: 'sourceNo'
                },
                10: {
                    orderType: 400,
                    key: 'sourceNo'
                },
            }
        },
        imgColumns () {
            return [
                {
                    type: 'index',
                    align: 'center',
                    title: 'No.',
                    width: 60
                }, 
                {
                    title: this.$ct('global.common.source_number', { defaultValue: '来源单号' }),
                    key: 'orderNo'
                },
                {
                    title: 'SKU',
                    key: 'sku'
                },
                {
                    title: this.$ct('fbb.photo.picture', { defaultValue: '照片' }),
                    key: 'pictureUrl',
                    maxWidth: 450,
                    minWidth: 86,
                    render: (h, { row }) => {
                        // return <a href={row.pictureUrl} target="_blank">{row.pictureUrl}</a>
                        let img = [];
                        row.pictureUrl.map(item => {
                            img.push(
                                <div style="float: left; cursor: pointer; margin-right: 10px;" onClick={this.handleImgModal.bind(this, item)}>
                                    <img style="width: 50px; height: 50px;" src={item} />
                                </div>
                            )
                        });
                        return (
                            <div style="padding: 10px 0; overflow: hidden;">
                                {img}
                            </div>
                        );
                    }
                },
                {
                    title: this.$ct('global.common.notes', { defaultValue: '备注' }),
                    key: 'remark',
                    render: (h, { row }) => {
                        let remark = [];
                        row.remark.map(item => {
                            remark.push(
                                <div>{item}</div>
                            )
                        });
                        return (
                            <div>{remark}</div>
                        )
                    }
                },
                {
                    title: this.$ct('global.common.createdtime', { defaultValue: '创建时间' }),
                    key: 'createdAt',
                    width: 150
                }
            ]
        }
    }
}
</script>

<style>

</style>